<template>
  <el-form
    ref="createForm"
    :model="createForm"
    label-position="right"
    style="width: 100%"
    :rules="createRules"
  >
    <el-form-item :label="`1`" prop="text">
      <el-input v-model="createForm.text"  />
    </el-form-item>
    <el-form-item :label="`2`" required>
      <el-col :span="11">
        <el-form-item prop="start_date">
          <el-date-picker v-model="createForm.start_date" type="date"  style="width: 100%;" />
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-form-item prop="end_date">
          <el-date-picker v-model="createForm.end_date" type="date" style="width: 100%;" />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item :label="`3`" prop="people">
      <el-select v-model="createForm.people" >
        <el-option v-for="(item) in mockData.peopleList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
/**
 * text, // 任务名
 * id, // 任务id
 * duration, // 任务时长，从start_date开始计算
 * parent, // 父任务ID
 * progress // 进度
 * start_date: moment(start_date).format('YYYY-MM-DD'), // 开始时间
 */
import Mock from 'mockjs'
export default {
  props: {
    dialogData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dialogType: {
      type: String,
      default: '',
      required: true
    }
  },
  data() {
    return {
      mockData: Mock.mock({
        'peopleList|3-10': [{
          'id|+1': 1,
          'name': '@cname'
        }]
      }),
      createForm: {
        text: '',
        start_date: '',
        end_date: '',
        people: ''
      },
      createRules: {
        text: [
          { required: true, message: this.$t('lang.pleaseInput'), trigger: 'change' }
        ],
        start_date: [
          { required: true, message: this.$t('lang.pleaseInput'), trigger: 'change' }
        ],
        end_date: [
          { required: true, message: this.$t('lang.pleaseInput'), trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              if (this.createForm.start_date >= value) {
                callback(new Error(this.$t('lang.endTimeGreaterThanStartTime')))
              } else {
                callback()
              }
            }
          }
        ],
        people: [
          { required: true, message: this.$t('lang.pleaseInput'), trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    dialogType: {
      handler(newValue) {
        if (newValue === 'edit') {
          const { text, start_date, end_date, people } = this.dialogData
          this.createForm = {
            text,
            start_date,
            end_date,
            people
          }
        } else if (newValue === 'add') {
          this.initForm()
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 提交表单
    confirm() {
      this.$refs.createForm.validate((valid) => {
        if (valid) {
          console.log('submit成功!', this.createForm)
          this.$emit('submit', this.createForm)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 初始化表单
    initForm() {
      const createFormRef = this.$refs.createForm
      this.createForm = {
        text: '',
        start_date: '',
        end_date: '',
        people: ''
      }
      // 第一次渲染未找到节点，会报错所以加一个判断
      if (createFormRef) {
        createFormRef.resetFields()
      }
    }
  }
}
</script>
